<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="受理量" :total="cardCount.sll | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :dataSource="chartData.sll" />
          </div>
          <template slot="footer">
            今日受理量：
            <span>{{ todaySll }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="办结量" :total="cardCount.bjl | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :dataSource="chartData.bjl" />
          </div>
          <template slot="footer">
            今日办结量：
            <span>{{ todayBjl }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="用户受理量" :total="cardCount.isll | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar :dataSource="chartData.isll" />
          </div>
          <template slot="footer">
            用户今日受理量：
            <span>{{ todayISll }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="用户办结量" :total="cardCount.ibjl | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar :dataSource="chartData.ibjl" />
          </div>
          <template slot="footer">
            用户今日办结量：
            <span>{{ todayIBjl }}</span>
          </template>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs
          default-active-key="1"
          size="large"
          :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
        >
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{width: '256px'}" />
          </div>

          <a-tab-pane loading="true" tab="受理监管" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="受理量统计" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card
                  title="快速开始 / 便捷导航"
                  style="margin-bottom: 24px"
                  :bordered="false"
                  :body-style="{padding: 0}"
                >
                  <div class="item-group">
                    <a-row>
                      <a-col
                        :class="'more-btn'"
                        :span="12"
                        v-for="(item,index) in registerTypeList"
                        :key=" 'registerType'+index "
                      >
                        <a-button
                          @click="goPage(index)"
                          style="margin-bottom:10px"
                          size="small"
                          type="primary"
                          ghost
                        >{{ item.text }}</a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="交互监管" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar-multid :dataSource="jhjgData" :fields="jhjgFields" title="平台与部门交互量统计"></bar-multid>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card
                  title="快速开始 / 便捷导航"
                  style="margin-bottom: 24px"
                  :bordered="false"
                  :body-style="{padding: 0}"
                >
                  <div class="item-group">
                    <a-row>
                      <a-col
                        :class="'more-btn'"
                        :span="12"
                        v-for="(item,index) in registerTypeList"
                        :key=" 'registerType'+index "
                      >
                        <a-button
                          @click="goPage(index)"
                          style="margin-bottom:10px"
                          size="small"
                          type="primary"
                          ghost
                        >{{ item.text }}</a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="效率监管" key="3">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <line-chart-multid :dataSource="xljgData" :fields="xljgFields" title="平台与部门交互效率统计"></line-chart-multid>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card
                  title="快速开始 / 便捷导航"
                  style="margin-bottom: 24px"
                  :bordered="false"
                  :body-style="{padding: 0}"
                >
                  <div class="item-group">
                    <a-row>
                      <a-col
                        :class="'more-btn'"
                        :span="12"
                        v-for="(item,index) in registerTypeList"
                        :key=" 'registerType'+index "
                      >
                        <a-button
                          @click="goPage(index)"
                          style="margin-bottom:10px"
                          size="small"
                          type="primary"
                          ghost
                        >{{ item.text }}</a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="存储监管" key="4">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <a-row>
                  <template v-if="diskInfo && diskInfo.length>0">
                    <a-col :span="12" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
                      <dash-chart-demo :title="item.name" :dataSource="item.restPPT"></dash-chart-demo>
                    </a-col>
                  </template>
                </a-row>
              </a-col>

              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card
                  title="快速开始 / 便捷导航"
                  style="margin-bottom: 24px"
                  :bordered="false"
                  :body-style="{padding: 0}"
                >
                  <div class="item-group">
                    <a-row>
                      <a-col
                        :class="'more-btn'"
                        :span="10"
                        v-for="(item,index) in registerTypeList"
                        :key=" 'registerType'+index "
                      >
                        <a-button
                          @click="goPage(index)"
                          style="margin-bottom:10px"
                          size="small"
                          type="primary"
                          ghost
                        >{{ item.text }}</a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <a-row :gutter="12">
      <a-card
        :loading="loading"
        :class="{ 'anty-list-cust':true }"
        :bordered="false"
        :style="{ marginTop: '24px' }"
      >
        <a-tabs
          default-active-key="1"
          size="large"
          :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
        >
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <a-radio-group defaultValue="1">
              <a-radio-button value="1">转移登记</a-radio-button>
              <a-radio-button value="2">抵押登记</a-radio-button>
            </a-radio-group>
          </div>

          <a-tab-pane loading="true" tab="业务流程限时监管" key="1">
            <a-table
              :dataSource="dataSource1"
              size="default"
              rowKey="id"
              :columns="columns"
              :pagination="ipagination"
            >
              <template slot="flowRate" slot-scope="text, record, index">
                <a-progress :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
              </template>
            </a-table>
          </a-tab-pane>

          <a-tab-pane loading="true" tab="业务节点限时监管" key="2">
            <a-table
              :dataSource="dataSource2"
              size="default"
              rowKey="id"
              :columns="columns2"
              :pagination="ipagination"
            >
              <template slot="flowRate" slot-scope="text, record, index">
                <span style="color: red;">{{ record.flowRate }}分钟</span>
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-row>
  </div>
</template>

<script>
import ChartCard from "@/components/ChartCard";
import ACol from "ant-design-vue/es/grid/Col";
import ATooltip from "ant-design-vue/es/tooltip/Tooltip";
import MiniArea from "@/components/chart/MiniArea";
import MiniBar from "@/components/chart/MiniBar";
import LineChartMultid from "@/components/chart/LineChartMultid";
import AreaChartTy from "@/components/chart/AreaChartTy";
import DashChartDemo from "@/components/chart/DashChartDemo";
import BarMultid from "@/components/chart/BarMultid";
import MiniProgress from "@/components/chart/MiniProgress";
import RankList from "@/components/chart/RankList";
import Bar from "@/components/chart/Bar";
import Trend from "@/components/Trend";
import { getAction } from "@/api/manage";
import { filterObj } from "@/utils/util";
//import dayjs from 'dayjs'

const rankList = [];
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: "白鹭岛 " + (i + 1) + " 号店",
    total: 1234.56 - i * 100
  });
}

const dataCol1 = [
  {
    title: "业务号",
    align: "center",
    dataIndex: "reBizCode"
  },
  {
    title: "权利类型",
    align: "center",
    dataIndex: "droitType"
  },
  {
    title: "登记类型",
    align: "center",
    dataIndex: "registeType"
  },
  {
    title: "座落",
    align: "center",
    dataIndex: "beLocated"
  },
  {
    title: "权利人",
    align: "center",
    dataIndex: "qlr"
  },
  {
    title: "义务人",
    align: "center",
    dataIndex: "ywr"
  },
  {
    title: "受理人",
    align: "center",
    dataIndex: "acceptBy"
  },
  {
    title: "受理时间",
    align: "center",
    dataIndex: "acceptDate"
  },
  {
    title: "当前节点",
    align: "center",
    dataIndex: "curNode"
  },
  {
    title: "办理进度",
    align: "center",
    dataIndex: "flowRate",
    scopedSlots: { customRender: "flowRate" }
  }
];

const dataCol2 = [
  {
    title: "业务号",
    align: "center",
    dataIndex: "reBizCode"
  },
  {
    title: "权利类型",
    align: "center",
    dataIndex: "droitType"
  },
  {
    title: "登记类型",
    align: "center",
    dataIndex: "registeType"
  },
  {
    title: "座落",
    align: "center",
    dataIndex: "beLocated"
  },
  {
    title: "权利人",
    align: "center",
    dataIndex: "qlr"
  },
  {
    title: "义务人",
    align: "center",
    dataIndex: "ywr"
  },
  {
    title: "受理人",
    align: "center",
    dataIndex: "acceptBy"
  },
  {
    title: "发起时间",
    align: "center",
    dataIndex: "acceptDate"
  },
  {
    title: "当前节点",
    align: "center",
    dataIndex: "curNode"
  },
  {
    title: "超时时间",
    align: "center",
    dataIndex: "flowRate",
    scopedSlots: { customRender: "flowRate" }
  }
];

const jhjgData = [
  {
    type: "房管",
    一月: 900,
    二月: 1120,
    三月: 1380,
    四月: 1480,
    五月: 1450,
    六月: 1100,
    七月: 1300,
    八月: 900,
    九月: 1000,
    十月: 1200,
    十一月: 600,
    十二月: 900
  },
  {
    type: "税务",
    一月: 1200,
    二月: 1500,
    三月: 1980,
    四月: 2000,
    五月: 1000,
    六月: 600,
    七月: 900,
    八月: 1100,
    九月: 1300,
    十月: 2000,
    十一月: 900,
    十二月: 1100
  },
  {
    type: "不动产",
    一月: 2000,
    二月: 1430,
    三月: 1300,
    四月: 1400,
    五月: 900,
    六月: 500,
    七月: 600,
    八月: 1000,
    九月: 600,
    十月: 1000,
    十一月: 1500,
    十二月: 1200
  }
];
const jhjgFields = [
  "一月",
  "二月",
  "三月",
  "四月",
  "五月",
  "六月",
  "七月",
  "八月",
  "九月",
  "十月",
  "十一月",
  "十二月"
];

const xljgData = [
  { type: "一月", 房管: 1.12, 税务: 1.55, 不动产: 1.2 },
  { type: "二月", 房管: 1.65, 税务: 1.32, 不动产: 1.42 },
  { type: "三月", 房管: 1.85, 税务: 1.1, 不动产: 1.5 },

  { type: "四月", 房管: 1.33, 税务: 1.63, 不动产: 1.4 },
  { type: "五月", 房管: 1.63, 税务: 1.8, 不动产: 1.7 },
  { type: "六月", 房管: 1.85, 税务: 1.98, 不动产: 1.8 },

  { type: "七月", 房管: 1.98, 税务: 1.5, 不动产: 1.76 },
  { type: "八月", 房管: 1.48, 税务: 1.2, 不动产: 1.3 },
  { type: "九月", 房管: 1.41, 税务: 1.9, 不动产: 1.6 },

  { type: "十月", 房管: 1.1, 税务: 1.1, 不动产: 1.4 },
  { type: "十一月", 房管: 1.85, 税务: 1.6, 不动产: 1.5 },
  { type: "十二月", 房管: 1.5, 税务: 1.4, 不动产: 1.3 }
];
const xljgFields = ["房管", "税务", "不动产"];
export default {
  name: "Analysis",
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    AreaChartTy,
    DashChartDemo,
    BarMultid
  },
  data() {
    return {
      xljgData,
      xljgFields,
      jhjgData,
      jhjgFields,
      loading: true,
      rankList,
      zsll: 0,
      zbjl: 0,
      todaySll: 0,
      todayBjl: 0,
      todayISll: 0,
      todayIBjl: 0,
      registerTypeList: [
        {
          text: "业务受理"
        },
        {
          text: "业务管理"
        },
        {
          text: "文件管理"
        },
        {
          text: "信息查询"
        }
      ],
      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      //数据集
      dataSource: [],
      dataSource1: [],
      dataSource2: [],
      url: {
        analysis: "/sps/register/analysis",
        list: "sps/register/virtualList",
        countSll: "sps/register/sllTenDaysCount",
        countBjl: "sps/register/bjlTenDaysCount",
        countISll: "sps/register/ISllTenDaysCount",
        countIBjl: "sps/register/IBjlTenDaysCount",
        queryDiskInfo: "api/queryDiskInfo"
      },
      chartData: {
        sll: [],
        bjl: [],
        isll: [],
        ibjl: []
      },
      cardCount: {
        sll: 0,
        bjl: 0,
        isll: 0,
        ibjl: 0
      },
      columns: dataCol1,
      columns2: dataCol2,
      diskInfo: []
    };
  },
  methods: {
    goPage(index) {
      if (index == 0) {
        this.$router.push({
          path: "/isps/registerStepForm",
          name: "isps-registerStepForm"
        });
      } else if (index == 1) {
        this.$router.push({
          path: "/isps/registerList",
          name: "isps-registerList"
        });
      } else if (index == 2) {
        this.$router.push({
          path: "/isps/fileManage",
          name: "isps-fileManage"
        });
      } else if (index == 3) {
        this.$router.push({
          path: "/isps/infoSearch",
          name: "isps-infoSearch"
        });
      }
    },
    loadList(arg) {
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams(); //查询条件
      getAction(this.url.list, params).then(res => {
        console.log("dsdsd", res.result);
        this.dataSource1 = res.result.data1;
        this.dataSource2 = res.result.data2;
        this.ipagination.total = 5;
      });
    },
    getQueryParams() {
      var param = { flowStatus: "-3" };
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      return filterObj(param);
    },
    formatRespectiveHoldCert(value) {
      return value == "1" || eval(value) ? "是" : "否";
    },
    formatCertFormat(value) {
      if (value == "1") {
        return "单一版";
      } else if (value == "2") {
        return "集成版";
      } else {
        return value;
      }
    },
    getFlowRateNumber(value) {
      return Number(value);
    },
    getFlowPercent(record) {
      if (record.flowStatus == "3") {
        return 100;
      } else if (record.flowStatus == "0") {
        return 0;
      } else {
        return record.flowRate;
      }
    },
    getFlowStatus(status) {
      if (status == "4") {
        return "exception";
      } else if (status == "0") {
        return "normal";
      } else if (status == "3") {
        return "success";
      } else {
        return "active";
      }
    },
    queryCount() {
      getAction(this.url.analysis).then(res => {
        if (res.success) {
          this.cardCount = res.result;
        }
        console.log(res);
      });
    },

    loadDiskInfo() {
      getAction(this.url.queryDiskInfo).then(res => {
        if (res.success) {
          console.log(res.result);
          let one = 0,
            two = "";
          for (let a in res.result) {
            let tempNum = Number(res.result[a].max);
            if (tempNum > one) {
              one = tempNum;
              two = res.result[a].name;
            }
          }
          let ontItem = res.result.filter(item => {
            return item.name == two;
          })[0];
          ontItem.restPPT = ontItem.restPPT / 10;
          this.diskInfo.push(ontItem);

          if (res.result.length > 1) {
            let one2 = 0,
              two2 = "";
            for (let a in res.result) {
              if (res.result[a].name == two) {
                continue;
              }
              let tempNum = Number(res.result[a].max);
              if (tempNum > one2) {
                one2 = tempNum;
                two2 = res.result[a].name;
              }
            }
            let one2Item = res.result.filter(item => {
              return item.name == two2;
            })[0];
            one2Item.restPPT = one2Item.restPPT / 10;
            this.diskInfo.push(one2Item);
          }
        } else {
          console.log(res.message);
        }
      });
    },
    loadChartData() {
      getAction(this.url.countSll).then(res => {
        if (res.success) {
          let map = res.result;
          for (var key in map) {
            let dataStr = key;
            let value = map[key];
            let today = dayjs(new Date()).format("YYYY-MM-DD");
            if (dataStr == today) {
              this.todaySll = map[today];
            }
            this.chartData.sll.push({
              x: dataStr,
              y: value
            });
          }
        }
      }),
        getAction(this.url.countBjl).then(res => {
          if (res.success) {
            let map = res.result;
            for (var key in map) {
              let dataStr = key;
              let value = map[key];
              let today = dayjs(new Date()).format("YYYY-MM-DD");
              if (dataStr == today) {
                this.todayBjl = map[today];
              }
              this.chartData.bjl.push({
                x: dataStr,
                y: value
              });
            }
          }
        }),
        getAction(this.url.countISll).then(res => {
          if (res.success) {
            let map = res.result;
            for (var key in map) {
              let dataStr = key;
              let value = map[key];
              let today = dayjs(new Date()).format("YYYY-MM-DD");
              if (dataStr == today) {
                this.todayISll = map[today];
              }
              this.chartData.isll.push({
                x: key,
                y: value
              });
            }
          }
        }),
        getAction(this.url.countIBjl).then(res => {
          if (res.success) {
            let map = res.result;
            for (var key in map) {
              let dataStr = key;
              let value = map[key];
              let today = dayjs(new Date()).format("YYYY-MM-DD");
              if (dataStr == today) {
                this.todayIBjl = map[today];
              }
              this.chartData.ibjl.push({
                x: key,
                y: value
              });
            }
          }
        });
    }
  },
  created() {
    this.loadDiskInfo();
    this.queryCount();
    this.loadChartData();
    this.loadList(1);
    setTimeout(() => {
      this.loading = !this.loading;
    }, 1000);
  }
};
</script>

<style lang="scss" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;
  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.item-group {
  .more-btn {
    margin-bottom: 13px;
    text-align: center;
  }
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
}

@media only screen and (min-width: 1600px) {
  .list-content-item {
    margin-left: 60px;
  }
}

@media only screen and (max-width: 1300px) {
  .list-content-item {
    margin-left: 20px;
  }
  .width-hidden4 {
    display: none;
  }
}
.list-content-item {
  span {
    line-height: 20px;
  }
}
.list-content-item {
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}
.anty-list-cust {
  .ant-list-item-meta {
    flex: 0.3 !important;
  }
}
.anty-list-cust {
  .ant-list-item-content {
    flex: 1 !important;
    justify-content: flex-start !important;
    margin-left: 20px;
  }
}
</style>